CSS2 introduced a mechanism for closer control over printing web pages that are styled using style sheets. In this section, we'll look at how this works.
There are two aspects to consider with printing. The page, and the contents of the page.
For the page, we need to consider what size it is, whether it is orientated as a portrait or landscape, what printing marks might be required, and what margin it has. For the content we need to worry about where pages break, and what is done with widow and orphan lines of text (we'll explain these terms below).
In CSS2, the page properties are defined by the @page rule, while several new properties help control page breaking.
At the heart of printing in CSS2 is the @page rule. This is similar to the @media rule, which you can learn about in the section on Media.
The @page rule defines a context for printing. Essentially it describes the paper sheet that the web page is going to be printed on.
@page rules work very much like the standard statements of a style sheet, though they take properties specific to pages that no other statement can use, and can also have margins specified using the familiar margin properties.
The properties of a page can be applied to every page, or differently to left and right hand side pages. When printing for bound publications, the margins on the left and right hand sides are usually different to take into account the center binding.
To specify properties for every page, the @page rule has the form @page {/* properties declared here */}
To specify the properties for left hand side pages, the @page rule has the form @page:left {/* properties declared here */}
To specify the properties for right hand side pages, the @page rule has the form @page:right {/* properties declared here */}
@page rules can be named, which, in conjunction with the page property we will see below, allows particular elements to be printed on particular kinds of pages (that is pages set up in a particular way). For instance, its easy to set up an @page rule for printing figures. Suppose we want to print any figures in landscape format. We can set up a named page like this
@page figures {
size: landscape
}
The name of a page is simply placed after the @page keyword and before the properties for the rule. Below we will see how the page property tells the browser which @page rule to use to print an element.
There are two sets of properties associated with printing.
@page rules.
The size property of an @page rule allows the printing context for a web page to be established. The size of a page can be either absolute, that is specified by a width and height (see below for details) or relative (specified by one of the keywords auto, landscape and portrait.)
size can be specified as either an absolute value, or as a relative value using keywords. Where a relative value is assigned, the browser can scale the content to fit the page size. Where an absolute value is assigned the browser must determine how to place content that is smaller than the size of the page.
Where an absolute value is to be specified, the size is assigned using length values. The values for width and height respectively are separated by simply a space. For example
@page {size: 21.0cm 29.7cm} /* A4 page dimensions in cm */
As a page has no concept of fonts, length units cannot be em and ex units.
The following keywords are defined by the CSS2 specification.
By default the size of a page is auto.
For professional level printing, crop marks indicate where the page is to be cut. CSS2 enables crop marks to be set for a page. Crop marks only appear where absolute values are used for size. Where a relative value is used, the crop marks appear outside the content, and as this is scaled to fit the target page, no crop marks appear on the printed page.
marks is specified by one of several keywords
By default the marks of a page is none.
Margins are the only general properties from CSS that can be applied to pages.
The margin properties set the top, left, bottom, right and all margins respectively.
Margins can be specified as either a percentage, a length or using the keyword auto.
Margins can be negative values.
Percentages
A percentage margin value sets the affected margin to that percentage of the width or height of the page. For instance, a margin-right: 20% sets the width of the right margin to 20% of the width of the page. margin-top: 20% sets the height of the top margin to 20% of the height of the page.
Length Values
We cover length values in detail in our section on values. With length values, you can set the margin to an absolute value, or a value relative to the size of the element itself. Note that because a page has no concept of fonts, the em and ex units cannot be used to set the margin of a page.
If no margin value is specified, the margin of a page is zero.
When content is to be printed, we need to worry what happens about page breaks. Customarily, new sections begin on new pages. An author may want a page break inserted before a table or illustration.
CSS2 provides two new properties that allow control over where the page will break when it is printed. These properties, page-break-before and page-break-after, can be applied to any element. They might be used to create a page break before headings of level one, or only headings of a certain class (for instance class="section").
A further problem when printing documents arises when only a few lines of a paragraph can fit at the bottom of a page (these are referred to as orphans) or only a few lines remain to be printed at the top of a page (these are referred to as widows). CSS2 provides two properties to specify what occurs with widow and orphan lines.
page-break-before controls how or whether a page breaks before an element. You can specify that a page should not break before a certain element, or that it should, and that the next page should be a left or right hand page.
page-break-before can take one of several keyword values.
If no value is specified, the page-break-before is set to auto.
An element does not inherit the page-break-before property of the element which contains it.
page-beak-after controls how or whether a page breaks after an element. You can specify that a page should not break after a certain element, or that it should, and that the next page should be a left or right hand page.
page-beak-after can take one of several keyword values.
If no value is specified, the page-beak-after is set to auto.
An element does not inherit the page-beak-after property of the element which contains it.
page-break-inside controls whether a page breaks inside an element. You can specify that a page should not break inside a certain element.
page-break-inside can take one of two values.
If no value is specified, the page-break-inside is set to auto.
An element does not inherit the page-break-inside property of the element which contains it.
orphans specifies the minimum number of lines of an element that must be left at the bottom of a page when the page breaks. If fewer than this number of lines can be placed at the bottom of the page, the page breaks before the element and the entire element is printed on the following page.
orphans takes an integer value. This value specifies the number of orphaned lines permitted.
If no value is specified, the orphans is set to 2.
An element does inherit the orphans property of the element which contains it.
widows specifies the minimum number of lines of an element that must be left at the top of a page when the previous page breaks. If fewer than this number of lines can be placed at the top of the page, the page breaks before the element and the entire element is printed on the following page.
widows takes an integer value. This value specifies the number of widowed lines permitted.
If no value is specified, the widows is set to 2.
An element does inherit the widows property of the element which contains it.
page identifies the @page rule that should apply to the selected element. page provides the name of the @page rule to be used. @page rules can be named by simply adding the name of the page after the @page keyword. Above we saw the example of a page called figures, to be used to ensure figures are printed in landscape format. This @page rule was
@page figures {
size: landscape
}
Now we want any of our "figures" to use this rule when they are printed. To do this, we use the page property
img.figures {
page: figures
}
This says that images of class "figures" (i.e elements marked up as <img class="figures">) should be printed using the @page rule called "figures".
page takes the value auto or an identifier value.
auto specifies that the browser may print the element on the current page.
An identifier is the name of the @page rule to be used for printing this kind of element. An identifier comprises only upper and lowercase characters, hyphens and the characters 0 to 9. An identifier must commence with an upper or lower case character (not a number or a hyphen) Identifiers must not include spaces or underscore characters.
If no value is specified, the page is set to auto.
An element does inherit the page property of the element which contains it.
Next we'll see how CSS2 provides a way of targetting different media types with the same style sheet.
|
|
|
|